import React from 'react';
const OrderInfo = () => {
    const [searchParams] = React.Router.useSearchParams();
    const orderid = searchParams.get('orderid') ? searchParams.get('orderid') : 0;
    const [orderInfo, setOrderInfo] = React.useState<any>({room: {}, guestlist: []});

    React.useEffect(() => {
        getOrderInfoData();
    }, [orderid])

    const getOrderInfoData = async() =>
    {
        let result = await React.HTTP.post('/order/info', {
            orderid: orderid,
            busid: React.Business.id,
        })

        if(result.code == 1) 
        {
            setOrderInfo(result.data);
        }
    }

    //评价
    const CommentView = () =>{
        if(orderInfo.rate > 0)
        {
            return(
                <>
                    <div className="info_footer">
                        <div className="content_title">评价信息：</div>
                        <div className="comment">
                            <React.UI.Rate value={orderInfo.rate} readOnly />

                            <React.UI.Divider
                                style={{
                                    color: '#1677ff',
                                    borderColor: '#1677ff',
                                    borderStyle: 'dashed',
                                }}
                            ></React.UI.Divider>

                            <React.UI.TextArea className='textarea' placeholder="请输入评论内容" defaultValue={orderInfo.comment} readOnly />
                        </div>
                    </div>
                </>
            )
        }
        else
        {
            return(
                <></>
            )
        }
    } 



    return (
        <>
            <link rel="stylesheet" href="/assets/css/order_info.css"></link>

            <div className="order_info">
                {/* 订单信息 */}
                <div className="info_content">
                    <div className="content_title">订单信息：</div>
                    <div className="content_item">
                        <p>入住时间</p>
                        <div>{orderInfo.starttime_text} {orderInfo.startday_text} - {orderInfo.endtime_text}  {orderInfo.endday_text}</div>
                    </div>
                    <div className="content_item">
                        <p>入住天数</p>
                        <div>共 {orderInfo.day_text} 晚</div>
                    </div>
                    <div className="content_item">
                        <p>订单价格</p>
                        <div className="content_price">￥{orderInfo.price}</div>
                    </div>
                    <div className="content_item">
                        <p>房间单价</p>
                        <div className="content_price">￥{orderInfo.room.price}</div>
                    </div>
                    <div className="content_item">
                        <p>支付方式</p>
                        <div>{orderInfo.type_text}</div>
                    </div>
                    <div className="content_item">
                        <p>入住人数</p>
                        <div>{orderInfo.guestlist.length} 人</div>
                    </div>
                    <div className="content_item">
                        <p>订单备注</p>
                        <div>{orderInfo.remark}</div>
                    </div>
                </div>

                {/* 酒店房间 */}
                <div className="info_footer">
                    <div className="content_title">房屋信息：</div>
                    <div className="detail">
                        <div className="thumb">
                            <img src={orderInfo.room.thumb_text} alt="" />
                        </div>
                        <div className="right">
                            <p>{orderInfo.room.name}</p>
                            <div className="tips">
                                {orderInfo.room.flag_text && orderInfo.room.flag_text.map((flag: any, index: any) => <span key={index}> {flag} </span>)}
                            </div>
                        </div>
                    </div>
                </div>

                {/* 住客信息 */}
                <div className="info_footer">
                    <div className="content_title">住客信息：</div>
                    <div className="resident_list">
                        <div className="list-body">
                            <div className="list-body-inner">
                                {
                                    orderInfo.guestlist.map((item:any) =>{
                                        return(
                                            <div className="list-item" key={item.id}>
                                                <div className="list-item-content">
                                                    <div className="list-item-content-main">
                                                        {item.nickname}{item.gender == '1' ? '(男)' : '(女)'}
                                                        <div className="list-item-description">手机号码：{item.mobile}</div>
                                                    </div>
                                                </div>
                                            </div>
                                        )
                                    })
                                }
                            </div>
                        </div>
                    </div>
                </div>

                {/* 评价 */}
                <CommentView/>
            </div>
        </>
    )
}

export default OrderInfo;